<template>
  <view class="login-container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <text class="title">登录</text>
    </view>
    
    <view class="login-form">
      <!-- logo -->
      <view class="logo">
        <image src="/static/logo.png" mode="aspectFit"></image>
      </view>
      
      <!-- 手机号输入框 -->
      <view class="input-box">
        <text class="iconfont icon-phone"></text>
        <input
          v-model="formData.mobile"
          type="number"
          maxlength="11"
          placeholder="请输入手机号"
          placeholder-class="placeholder"
        />
      </view>
      
      <!-- 密码输入框 -->
      <view class="input-box">
        <text class="iconfont icon-lock"></text>
        <input
          v-model="formData.password"
          :type="showPassword ? 'text' : 'password'"
          placeholder="请输入密码"
          placeholder-class="placeholder"
        />
        <text 
          class="iconfont eye-icon" 
          :class="showPassword ? 'icon-eye' : 'icon-eye-close'"
          @tap="showPassword = !showPassword"
        ></text>
      </view>
      
      <!-- 登录按钮 -->
      <button 
        class="login-btn" 
        :loading="loading"
        @tap="handleLogin"
      >
        登录
      </button>
      
      <!-- 其他操作 -->
      <view class="other-options">
        <text @tap="toForgetPassword">忘记密码</text>
        <text @tap="toRegister">注册账号</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'

const formData = reactive({
  mobile: '',
  password: ''
})

const showPassword = ref(false)
const loading = ref(false)

// 表单验证
const validateForm = () => {
  if (!formData.mobile) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return false
  }
  if (!/^1[3-9]\d{9}$/.test(formData.mobile)) {
    uni.showToast({
      title: '手机号格式不正确',
      icon: 'none'
    })
    return false
  }
  if (!formData.password) {
    uni.showToast({
      title: '请输入密码',
      icon: 'none'
    })
    return false
  }
  return true
}

// 登录处理
const handleLogin = async () => {
  if (!validateForm()) return
  
  loading.value = true
  try {
    // 这里调用登录接口
    const res = await uni.request({
      url: '/api/user/login',
      method: 'POST',
      data: formData
    })
    
    if (res.data.code === 0) {
      uni.showToast({
        title: '登录成功',
        icon: 'success'
      })
      
      // 存储token
      uni.setStorageSync('token', res.data.token)
      
      // 跳转
      const redirectUrl = uni.getStorageSync('redirectUrl') || '/pages/index/index'
      uni.reLaunch({
        url: redirectUrl
      })
    } else {
      uni.showToast({
        title: res.data.message || '登录失败',
        icon: 'none'
      })
    }
  } catch (error) {
    uni.showToast({
      title: '登录失败，请重试',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 页面跳转
const toForgetPassword = () => {
  uni.navigateTo({
    url: '/pages/index/forget-password'
  })
}

const toRegister = () => {
  uni.navigateTo({
    url: '/pages/index/register'
  })
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background-color: #fff;
  
  .navbar {
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-bottom: 1rpx solid #eee;
    padding-top: var(--status-bar-height);
    
    .title {
      font-size: 32rpx;
      font-weight: 500;
    }
  }
  
  .login-form {
    padding: 40rpx;
    
    .logo {
      text-align: center;
      margin: 60rpx 0;
      
      image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 80rpx;
      }
    }
    
    .input-box {
      position: relative;
      margin-bottom: 30rpx;
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      height: 88rpx;
      background: #f8f8f8;
      border-radius: 44rpx;
      
      .iconfont {
        font-size: 40rpx;
        color: #999;
        margin-right: 20rpx;
      }
      
      input {
        flex: 1;
        font-size: 28rpx;
      }
      
      .eye-icon {
        padding: 10rpx;
      }
      
      .placeholder {
        color: #999;
      }
    }
    
    .login-btn {
      margin-top: 60rpx;
      height: 88rpx;
      line-height: 88rpx;
      background: #007AFF;
      color: #fff;
      font-size: 32rpx;
      border-radius: 44rpx;
      
      &[loading] {
        opacity: 0.7;
      }
    }
    
    .other-options {
      display: flex;
      justify-content: space-between;
      margin-top: 40rpx;
      padding: 0 20rpx;
      
      text {
        color: #666;
        font-size: 28rpx;
      }
    }
  }
}
</style> 